<!-- testing/Inf.vue -->
<template>
  <div>
    <div class="list"
      v-infinite-scroll="loadmore"
      infinite-scroll-distance="45"
      infinite-scroll-disabled="busy">
      <p v-for="item in n" :key="item">列表项: {{item}}</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      n: 10,
      busy: false
    }
  },
  methods:{
    loadmore(){ // 加载更多
      // 禁用无限滚动  将不再会支持loadmore
      this.busy = true;  
      console.log('loadmore...');
      // 模拟发送异步请求，响应3s后接收，更新列表
      setTimeout(() => {
        this.n += 20;
        this.busy = false; // 启用无限滚动，触底后将重新执行loadmore
      }, 3000);
    }
  }
}
</script>
<style scoped>
.list p {
  text-align: center; height: 45px; line-height: 45px;
  border-bottom: 1px solid #444;
}
</style>

